<template>
	<view class="j-balance-box">
		<template v-if="record.length">
			<view class="j-b-r">
				<view class="j-b-r-row" v-for="(item, index) in record" :key="index">
					<view class="j-b-r-describe">
						<view class="j-b-r-text">
							<template v-if="item.orderState == 1">
								待审核
							</template>
							<template v-if="item.orderState == 2">
								审核通过
							</template>
							<template v-if="item.orderState == 3">
								审核拒绝
							</template>
						</view>
						<view class="j-b-r-val">
							<template v-if="item.orderState == 2">
								+
							</template>
							{{ item.totalAmount }}
						</view>
					</view>
					<view class="j-b-r-describe j-b-r-de">
						<view class="j-b-r-text">{{ item.createTime }}</view>
						<view class="j-b-r-cal">余额：{{ item.userBalance }}</view>
					</view>
					<view class="j-b-r-describe j-b-r-de" v-if="item.remark">
						<view class="j-b-r-text">审核备注：{{ item.remark }}</view>
					</view>
				</view>
			</view>
			<u-loadmore :status="status" bg-color="#f3f3f3" :margin-bottom="20" :margin-top="20" :load-text="loadText" />
		</template>
		<template v-else>
			<view class="j-a-empty"><u-empty></u-empty></view>
		</template>
	</view>
</template>

<script>
const _ = require('lodash');
export default {
	data() {
		return {
			status: 'nomore',
			loadText: {
				loadmore: '轻轻上拉',
				loading: '努力加载中',
				nomore: '没有数据啦'
			},
			record: [],
			params: {
				page: 0,
				rows: 10
			}
		};
	},
	onLoad() {
		this.pullUp();
	},
	onReachBottom() {
		this.pullUp();
	},
	onPullDownRefresh() {
		this.dropDown();
	},
	methods: {
		// 下拉刷新
		dropDown() {
			// 修改当前view的数据
			this.params.page = 1;
			// 加载下拉刷新的数据
			this.postTopUpRecord('down');
		},
		// 上拉加载
		pullUp() {
			// 增加页数
			this.params.page++;
			// 请求获取精品推荐商品数据
			this.postTopUpRecord('up');
		},
		// 用户资金-充值记录
		postTopUpRecord(type) {
			this.$u.api
				.postTopUpRecord(this.params)
				.then(res => {
					console.log(res, '[充值记录页-充值记录接口]');
					uni.stopPullDownRefresh();

					// 如果是上拉加载
					if (type == 'up') {
						// 判断分页
						if (this.params.page <= res.data.totalPage) {
							this.record.push(...res.data.rows);
							this.status = 'loading';

							// 如果数量小于页容量，显示没有更多数据
							if (res.data.rows.length < this.params.rows) {
								this.status = 'nomore';
							}
						} else {
							this.params.page = res.data.totalPage;
							this.status = 'nomore';
						}
					}

					// 如果是下拉刷新
					if (type == 'down') {
						// 判断第一页的数据与当前view的页容量内数据有没有一样的，如果没有一下的将数据放在数组第一位
						let arrNew = this.record.slice(0, this.params.rows);

						// 去除两个数组重复的数据
						let mix = _.differenceBy(res.data.rows, arrNew, 'orderId');
						// 如果有新数据，将新数据和现有的数据连接到一起，新数据在前，老数据在后
						let arr = _.concat(mix, this.record);

						this.record = arr;

						// 删除页容量个数之后的数据
						this.record.splice(this.params.rows, arr.length - this.params.rows);
					}
				})
				.catch(err => {
					console.log(err);
				});
		}
	}
};
</script>

<style>
page {
	background-color: #f3f3f3;
}
</style>
<style scoped lang="scss">
.j-balance-box {
	padding: 25rpx;

	.j-a-empty {
		margin-top: 60rpx;
	}
}
.j-b-r {
	background: rgba(255, 255, 255, 1);
	border-radius: 14rpx;

	.j-b-r-title {
		padding: 30rpx 25rpx;
		display: flex;
		align-items: center;

		.j-b-r-division {
			width: 6rpx;
			height: 34rpx;
			background: linear-gradient(180deg, rgba(254, 208, 0, 1), rgba(254, 189, 0, 1));
		}

		.j-b-r-text {
			margin-left: 20rpx;
		}
	}

	.j-b-r-row {
		padding: 25rpx;
		border-top: 1rpx solid #f1f1f1;

		&:first-of-type {
			border: 0;
		}

		.j-b-r-describe {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.j-b-r-text {
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
				word-break: break-all;
				width: 400rpx;
			}

			.j-b-r-val {
				width: 240rpx;
				text-align: right;
			}

			&.j-b-r-de {
				color: #797979;
				font-size: 24rpx;
			}
		}
	}
}
</style>
